// 处理路由变化

import { importHTML } from './import-html'
import { getApps } from './index'
import { getNextRouter, getPrevRouter } from './rewrite-router'

export const handleRouter = async () => {
  // 路由变化时进行调用
  // 2、匹配子应用
  // 2.1、获取当前的路由路径  window.location.pathname
  // 2.2、从_apps中查找对应的子应用信息
  const apps = getApps()

  // 卸载上一个应用
  const prevApp = apps.find(item => {
    return getPrevRouter().startsWith(item.activeRule)
  })

  // 加载下一个应用
  const app = apps.find(item => {
    return getNextRouter().startsWith(item.activeRule)
  })
  if (prevApp) {
    await prevApp.unmount()
  }
  if (!app) return

  // 3、加载子应用
  const { template, execScripts } = await importHTML(app.entry)
  const container = document.querySelector(app.container)
  container.appendChild(template)

  window.__POWERED_BY_QIANKUN__ = true // 设置__POWERED_BY_QIANKUN__ 告诉子应用是qiankun的环境运行的
  window.__webpack_public_path__ = app.entry
  const appExports = await execScripts()
  app.bootstrap = appExports.bootstrap
  app.mount = appExports.mount
  app.unmount = appExports.unmount
  console.log(appExports, 'appExports=========', app)
  await bootstrap(app)
  await mount(app)
  await unmount(app)
  // // 请求获取子应用的资源 HTML、CSS、JS
  // // 浏览器出于安全考虑 innerHTML中的script不会加载和执行
  // // 客户端需要执行JS代码逻辑来生成内容  因此就需要手动执行JS代码 通过evel()进行实现
  // const html = await fetch(app.entry).then(res => {
  //     return res.text()
  // })
  // const container = document.querySelector(app.container)
  // container.innerHTML = html

  // 4、渲染子应用
}
async function bootstrap (app) {
  app.bootstrap && app.bootstrap()
}

async function mount (app) {
  app.mount && app.mount({
    container: document.querySelector(app.container)
  })
}

async function unmount (app) {
  app.unmount && app.unmount({
    container: document.querySelector(app.container)
  })
}
